<!DOCTYPE html>
<html>
<head>
<title>Uniaxial Crystal Plate Diagram</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
    }
    canvas {
        border: 1px solid #ccc;
        background-color: white;
    }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="800" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Helper Functions ---
    function drawArrowHead(ctx, x, y, angle, headlen = 10) {
        ctx.save();
        ctx.fillStyle = ctx.strokeStyle;
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x - headlen * Math.cos(angle - Math.PI / 6), y - headlen * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(x - headlen * Math.cos(angle + Math.PI / 6), y - headlen * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

    function drawDoubleArrow(ctx, x1, y1, x2, y2, headlen = 10) {
        const dx = x2 - x1;
        const dy = y2 - y1;
        const angle1 = Math.atan2(dy, dx);
        const angle2 = Math.atan2(-dy, -dx);

        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
        drawArrowHead(ctx, x1, y1, angle2, headlen);
        drawArrowHead(ctx, x2, y2, angle1, headlen);
        ctx.restore();
    }

    // --- General Settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;

    // --- Left Diagram ---
    const left_cx = 220;
    const cy = 225;
    const plate_width = 40;
    const plate_height = 180;

    // Propagation line
    ctx.beginPath();
    ctx.moveTo(40, cy);
    ctx.lineTo(left_cx + 180, cy);
    ctx.stroke();
    drawArrowHead(ctx, 130, cy, 0, 8);
    drawArrowHead(ctx, 170, cy, 0, 8);
    drawArrowHead(ctx, 280, cy, 0, 8);
    drawArrowHead(ctx, 320, cy, 0, 8);
    
    // E_i Symbol
    ctx.save();
    ctx.font = "italic 22px serif";
    ctx.fillText("E", 80, 195);
    ctx.font = "italic 16px serif";
    ctx.fillText("i", 97, 200);
    // Vector arrow over E
    ctx.beginPath();
    ctx.moveTo(82, 180);
    ctx.lineTo(95, 180);
    ctx.stroke();
    drawArrowHead(ctx, 95, 180, 0, 6);
    ctx.restore();
    
    // Polarization symbol on the line
    drawDoubleArrow(ctx, 100, cy - 30, 100, cy + 30, 8);

    // Plate
    ctx.save();
    ctx.fillStyle = "rgba(230, 230, 230, 0.7)";
    ctx.fillRect(left_cx - plate_width / 2, cy - plate_height / 2, plate_width, plate_height);
    ctx.lineWidth = 2;
    ctx.strokeRect(left_cx - plate_width / 2, cy - plate_height / 2, plate_width, plate_height);
    ctx.restore();
    
    // Optical Axis O-O' (dashed line in the middle of the plate)
    ctx.save();
    ctx.setLineDash([6, 4]);
    ctx.beginPath();
    ctx.moveTo(left_cx, cy - plate_height / 2 - 30);
    ctx.lineTo(left_cx, cy + plate_height / 2 + 30);
    ctx.stroke();
    ctx.restore();
    
    // Labels O and O'
    ctx.font = "24px serif";
    ctx.fillText("O", left_cx - 8, cy - plate_height / 2 - 35);
    ctx.fillText("O'", left_cx - 10, cy + plate_height / 2 + 45);

    // Thickness d
    const d_y = cy + plate_height / 2 + 15;
    drawDoubleArrow(ctx, left_cx - plate_width / 2, d_y, left_cx + plate_width / 2, d_y, 8);
    ctx.font = "italic 20px serif";
    ctx.fillText("d", left_cx + plate_width / 2 + 10, d_y + 5);

    // --- Right Diagram ---
    const right_cx = 600;
    const r = 110;

    // Circle
    ctx.save();
    ctx.fillStyle = "rgb(230, 230, 230)";
    ctx.beginPath();
    ctx.arc(right_cx, cy, r, 0, 2 * Math.PI);
    ctx.fill();
    ctx.lineWidth = 2.5;
    ctx.stroke();
    ctx.restore();

    // Axes
    ctx.beginPath();
    ctx.moveTo(right_cx - r - 20, cy);
    ctx.lineTo(right_cx + r + 20, cy);
    ctx.stroke();

    ctx.save();
    ctx.setLineDash([6, 4]);
    ctx.beginPath();
    ctx.moveTo(right_cx, cy - r - 20);
    ctx.lineTo(right_cx, cy + r + 20);
    ctx.stroke();
    ctx.restore();

    // Labels O and O'
    ctx.font = "24px serif";
    ctx.fillText("O", right_cx - 8, cy - r - 25);
    ctx.fillText("O'", right_cx - 10, cy + r + 35);
    
    // E_i vector
    const theta = 30 * Math.PI / 180;
    const L = r * 0.9;
    const x1 = right_cx + L * Math.sin(theta);
    const y1 = cy - L * Math.cos(theta);
    const x2 = right_cx - L * Math.sin(theta);
    const y2 = cy + L * Math.cos(theta);
    ctx.save();
    ctx.lineWidth = 2.5;
    drawDoubleArrow(ctx, x1, y1, x2, y2, 12);
    ctx.restore();

    // E_i Label
    ctx.save();
    ctx.font = "italic 24px serif";
    ctx.fillText("E", x1 + 10, y1 + 5);
    ctx.font = "italic 16px serif";
    ctx.fillText("i", x1 + 25, y1 + 10);
    // Vector arrow over E
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(x1 + 10, y1 - 8);
    ctx.lineTo(x1 + 24, y1 - 8);
    ctx.stroke();
    drawArrowHead(ctx, x1 + 24, y1 - 8, 0, 6);
    ctx.restore();

    // Angle theta
    const arc_r = 45;
    const startAngle = -Math.PI / 2;
    const endAngle = startAngle + theta;
    ctx.save();
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.arc(right_cx, cy, arc_r, startAngle, endAngle);
    ctx.stroke();
    ctx.restore();

    // Theta label
    const angle_label_rad = startAngle + theta / 2;
    const label_r = arc_r - 18;
    const lx = right_cx + label_r * Math.cos(angle_label_rad);
    const ly = cy + label_r * Math.sin(angle_label_rad);
    ctx.font = "italic 24px serif";
    ctx.fillText("θ", lx + 5, ly + 10);

</script>
</body>
</html>